<template>
	<div class="NavigationLeft-body">
		<div class="NavigationLeft-header">
			<img src="@/img/img/img8.jpg" class="face" alt="" />
			<p class="back">无伤</p>
		</div>
		<div class="Navigation"> 
			<Navigation/>
		</div>
	</div>
</template>

<script setup>
	import Navigation from './Navigation.vue'
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color:#000;
	}
	/* height: 50px; */
	.NavigationLeft-body{
		width: 60%;
		min-width: 600px;
		max-width: 1132px;
		height: 50px;
		display: flex;
		align-items: center;
		/* border: 1px solid #000; */
		
		
	}
	.NavigationLeft-header{
		width: 15%;
		min-width: 100px;
		max-width: 150px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.face{
		width: 100%;
		height: 50px;
	}
	.back{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
		/* background-color: #00ffff; */
		margin-left: -100%;
	}
	.NavigationLeft-header:hover .face{
		transform: rotateY(-180deg);
	}
	.NavigationLeft-header .back{
		transform: rotateY(180deg);
	}
	.NavigationLeft-header:hover .back{
		transform: rotateY(0deg);
	}
	
	.back, .face{
		backface-visibility: hidden;
	}
	
	.Navigation{
		width: 85%;
		min-width: 500px;
		height: 100%;
	}
</style>